<template>
	<view class="htz-signature-body">
		<image v-if="showImg" :src="images" mode="" class="img"></image>
		<canvas v-else :canvas-id="cid" :id="cid" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas>
		<view class="htz-signature-fixed-bottom">
			<view class="">
				<checkbox-group @change="checkboxChange">
					<label>
						<checkbox value="cb" :checked="check"/>使用签名
					</label>
				</checkbox-group>
			</view>
			<view class="htz-signature-fixed-bottom-item sumbit" @click="sumbit">提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'htz-signature',
		props: {
			cid: {
				type: String,
				default: '',
			},
		},
		data() {
			return {
				cb: [], // check内容
				check: false, // 是否选中
				showImg: false, // 展示签名
				images: '', // 签名图片
				isSignature: false, // 是否有签名
				id: '',
				Strokes: [],
				dom: null,
				width: 0,
				height: 0,
				colorShow: false,
				colorIndex: 0,
				colorData: [{
					name: 'black',
					value: '#000000'
				}, {
					name: 'red',
					value: '#f34336',
				}, {
					name: 'blue',
					value: '#0238d0',
				}, {
					name: 'green',
					value: '#8bc24b',
				}, {
					name: 'yellow',
					value: '#ffeb3c',
				}, {
					name: 'purple',
					value: '#a603d0',
				}, {
					name: 'grey',
					value: '#a5a5a5',
				}],
				lineWidthShow: false,
				lineWidthIndex: 0,
				lineWidthData: ['3', '6', '9', '12', '15', '18']
			}
		},
		mounted: function() {
			this.$nextTick(function() {
				// #ifdef H5
				document.body.addEventListener('touchmove', this.touchmoveEnd, {
					passive: false
				})
				// #endif

				uni.getSystemInfo({
					success: (res) => {
						this.width = res.windowWidth;
						this.height = res.windowHeight;
					}
				});

				this.dom = uni.createCanvasContext(this.cid, this);

			});
		},
		beforeDestroy: function() {
			// #ifdef H5
			document.body.removeEventListener('touchmove', this.touchmoveEnd, {
				passive: false
			})
			// #endif
		},
		methods: {
			touchmoveEnd(e) {
				e.preventDefault();
				e.stopPropagation();
			},
			checkboxChange(e) {
				this.cb = e.detail.value;
				if (e.detail.value.length > 0) {
					if (uni.getStorageSync('image')) {
						// 有本地签名
						this.showImg = true
						this.images = uni.getStorageSync('image')
					} else {
						this.cb = []
						this.check = false
						this.showImg = false
						uni.showToast({
						    title: '暂无签名可使用',
						    duration: 2000,
							icon: 'none'
						});
					}
				} else {
					// 没有选中签名
					this.showImg = false
				}
			},
			sumbit() {
				if (this.cb.length == 1) {
					// 选中使用签名
					const res = {
						tempFilePath: uni.getStorageSync('image')
					}
					this.$emit('sumbit', res)
				} else {
					uni.canvasToTempFilePath({
						canvasId: this.cid,
						success: (res) => {
							if (this.isSignature == false) {
								uni.showToast({
								    title: '请填写签名',
								    duration: 2000,
									icon: 'none'
								});
							} else {
								this.$emit('sumbit', res)
							}
						},
						fail: (err) => {
							this.$emit('fail', err)
						}
					}, this)
				}
			},
			drawCanves() {
				//this.dom.draw();
				this.Strokes.forEach((item, index) => {
					let StrokesItem = item;
					// console.log(index, this.Strokes.length)
					if (StrokesItem.points.length > 1) {
						this.dom.beginPath();
						this.dom.setLineCap('round');
						this.dom.setStrokeStyle(item.style.color);
						this.dom.setLineWidth(item.style.lineWidth);
						StrokesItem.points.forEach((sitem, sindex) => {
							if (sitem.type == "touchstart") {
								this.dom.moveTo(sitem.x, sitem.y)
							} else {
								this.dom.lineTo(sitem.x, sitem.y)
							}
						})
						this.dom.stroke();

					}
				})
				this.dom.draw();
			},
			createId() {
				var d = new Date();
				return 'can' + d.getTime();
			},
			touchstart(e) {
				this.Strokes.push({
					imageData: null,
					style: {
						color: this.colorData[this.colorIndex].value,
						lineWidth: this.lineWidthData[this.lineWidthIndex],
					},
					points: [{
						x: e.touches[0].x,
						y: e.touches[0].y,
						type: e.type,
					}]
				})
				this.drawLine(this.Strokes[this.Strokes.length - 1], e.type);
			},
			touchmove(e) {
				this.isSignature = true
				this.Strokes[this.Strokes.length - 1].points.push({
					x: e.touches[0].x,
					y: e.touches[0].y,
					type: e.type,
				})
				this.drawLine(this.Strokes[this.Strokes.length - 1], e.type);
			},
			touchend(e) {
				if (this.Strokes[this.Strokes.length - 1].points.length < 2) { //当此路径只有一个点的时候
					this.Strokes.pop();
				}
			},
			drawLine(StrokesItem, type) {
				if (StrokesItem.points.length > 1) {
					this.dom.beginPath();
					this.dom.setLineCap('round')
					this.dom.setStrokeStyle(StrokesItem.style.color);
					this.dom.setLineWidth(StrokesItem.style.lineWidth);
					this.dom.moveTo(StrokesItem.points[StrokesItem.points.length - 2].x, StrokesItem.points[StrokesItem
						.points.length -
						2].y);
					this.dom.lineTo(StrokesItem.points[StrokesItem.points.length - 1].x, StrokesItem.points[StrokesItem
						.points.length -
						1].y);
					this.dom.stroke();
					this.dom.draw(true);
				}
			}
		}
	}
</script>

<style scoped>
	.htz-signature-body {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.htz-signature-body canvas {
		width: 100%;
		height: 300rpx;
		border: 1px dashed #000;
	}
	
	.img {
		width: 100%;
		height: 300rpx;
		border: 1px dashed #000;
		display: block;
	}

	.htz-signature-fixed-bottom {
		width: 100%;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		color: #000;
		z-index: 11;
		background-color: #fff;
		margin-top: 20rpx;
		display: flex;
	}

	.htz-signature-fixed-bottom .htz-signature-fixed-bottom-item {
		-webkit-box-flex: 3;
		-webkit-flex-grow: 3;
		flex-grow: 3;
		border-top: 1px solid #1890ff;
		color: #1890ff;
		margin-left: 20rpx;
	}

	.htz-signature-fixed-bottom view.sumbit {
		-webkit-box-flex: 1;
		-webkit-flex-grow: 1;
		flex-grow: 1;
		background-color: #1890ff;
		color: #fff;
	}
</style>
